<template>
    <Row>
        <Col span="22" offset="1">
            <Form ref="CaseMain" :model="CaseMain" :rules="ruleValidate" :label-width="150" :style="{marginTop: '30px'}">
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="案件编码">
                            <Input v-model.trim="CaseMain.NumCode" readonly placeholder="案件编码由系统自动生成" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">案件基本信息</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="涉案项目">
                            <Input readonly v-model.trim="CaseMain.CaseProject.Name" placeholder="例如：临澧江山樾" >
                                <Button slot="append" @click="ShowDialog = true" icon="ios-search"></Button>
                            </Input>
                        </FormItem>
                    </Col>
                    <Modal
                        v-model="ShowDialog"
                        height="600vh"
                        width="1000vh"
                        ok-text="选择"
                        @on-ok = "SelectProjects"
                        cancel-text="关闭"
                        title="请选择人员角色">
                        <Row :gutter="16">
                            <Col span="24">
                                <Card>
                                    <p slot="title" style="height:32px;">
                                        <Icon type="ios-ionitron-outline"></Icon>
                                        项目列表
                                        <Input suffix="ios-search" v-model.trim="keyword" @on-search="QueryProject" placeholder="请输入项目名称！" :style="{width: 'auto',float: 'right',borderRadius : '15px'}" :clearable="true" :search="true" />
                                    </p>
                                    <Content :style="{borderRadius: '10px',height: '40vh'}">
                                        <Table stripe highlight-row height='372' @on-row-click="SelectSingleRow" :columns="ProjectColumns" :data="ProjectData"></Table>
                                    </Content>
                                    <div :style="{ background: 'white',padding: '15px 10px 10px',textAlign: 'center',marginRight: '135px'}">
                                        <Page 
                                            :style="{ textAlign:'right',marginTop: '0px',paddingRight: '0px',background: 'white'}"
                                            show-sizer 
                                            show-elevator 
                                            show-total 
                                            :total="ProjectTotal"
                                            :page-size="ProjectPageSize"
                                            :page-size-opts="ProjectPageSizeOpts"
                                            @on-change="ProjectChangePage"
                                            @on-page-size-change="ProjectChangePageSize"/>
                                    </div>
                                </Card>
                            </Col>
                        </Row>
                        
                    </Modal>
                    <Col span="10">
                        <FormItem label="管辖分公司">
                            <Input readonly v-model.trim="CaseMain.CaseProject.Company" placeholder="例如：建设杭州分公司" >
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="10" offset="2">
                        <FormItem label="分公司负责人">
                            <Input readonly v-model.trim="CaseMain.CaseProject.CompanyBoss" placeholder="例如：赵狄龙" >
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                
                <Divider orientation="left">案件地址信息</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="省份" prop="Province">
                            <Input v-model.trim="CaseMain.CaseProject.Province" readonly placeholder="例如：浙江省、湖南省、上海市" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="城市" prop="City">
                            <Input v-model.trim="CaseMain.CaseProject.City" readonly placeholder="例如：绍兴市、杭州市、宁波市" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="市（县）、区"  prop="Zone">
                            <Input v-model.trim="CaseMain.CaseProject.Zone" readonly placeholder="例如：诸暨市、丽水市、绍兴县" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="20" offset="2">
                        <FormItem label="详细地址" prop="AddressDetail">
                            <Input  v-model.trim="CaseMain.CaseProject.AddressDetail" readonly placeholder="例如：XXX街道，XXX路,XXX号" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">案件地址状态</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="案件状态">
                            <Select v-model.number="CaseMain.CaseStatus" >
                                <Option v-for="item in CaseStatuses" :value=item.value :key="item.label">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="10">
                        <FormItem label="保全状态">
                            <Select v-model.number="CaseMain.PreserveStatus" >
                                <Option v-for="item in PreserveStatuses" :value=item.value :key="item.label">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                     <Col span="10" offset="2">
                        <FormItem label="执行状态">
                            <Select v-model.number="CaseMain.ExcuteStatus" >
                                <Option v-for="item in ExcuteStatuses" :value=item.value :key="item.label">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">其他信息</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="落实人" prop="RegistOperator">
                            <Input  v-model.trim="CaseMain.RegistOperator" readonly placeholder="例如：马超" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="创建时间">
                            <DatePicker v-model="CaseMain.CreateTime" type="date" placeholder="请选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" readonly style="width:100%"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="20" offset="2" style="text-align:center;margin-top:58px">
                        <Button type="primary" @click="Submit('CaseMain')">提交</Button>
                        <Button @click="Reset('CaseMain')" style="margin-left: 108px">重置</Button>
                    </Col>
                </Row>
            </Form>
        </Col>
    </Row>
</template>
<script>
import { mapState } from "vuex";
import { CreateCode,GetOne,Create,Update } from '@/axios/api/CaseMainAPI'
import { GetListByPage } from '@/axios/api/ProjectAPI'

export default {
    computed:{
        ...mapState('casemain',[
            'currentCaseMainID',
            'pageIndex',
            'pageSize',
        ])
    },
    components: {
        
    },
    mounted: function(){
        //console.log(this.currentCaseMainID)

        if(this.currentCaseMainID != ''){
            this.$Spin.show();
        }
        setTimeout(() => {
            this.$Spin.hide();
        }, 1000);

        GetListByPage({
            PageIndex: this.ProjectPageIndex,
            PageSize: this.ProjectPageSize
        }).then(res => {
            this.ProjectTotal = res.totalCount;
            this.ProjectData = res.items
        })

        if(this.currentCaseMainID != ''){
            GetOne(this.currentCaseMainID).then(res => {
                this.CaseMain.Id = res.Id;
                this.CaseMain.Num = res.Num;
                this.CaseMain.NumCode = res.NumCode;
                this.CaseMain.SocialCreditCode = res.SocialCreditCode;
                this.CaseMain.OrgnizationCode = res.SocialCreditCode.slice(7,-2) + '-' + res.SocialCreditCode.slice(-2,-1);
                this.CaseMain.Name = res.Name;
                this.CaseMain.NickName = res.NickName;
                this.CaseMain.LegalRepresentative = res.LegalRepresentative;
                this.CaseMain.Capital = res.Capital;
                this.CaseMain.CaseMainType = res.CaseMainType;
                this.CaseMain.Province = res.Province;
                this.CaseMain.City = res.City;
                this.CaseMain.Zone = res.Zone;
                this.CaseMain.AddressDetail = res.AddressDetail;
                this.CaseMain.RegistTime = res.RegistTime;
                this.CaseMain.EstablishTime = res.EstablishTime;
                this.CaseMain.AllowBeginTime = res.AllowBeginTime;
                this.CaseMain.AllowEndTime = res.AllowEndTime;
                this.CaseMain.Business = res.Business;
                this.CaseMain.Status = res.Status;
                this.CaseMain.CreateTime = res.CreateTime;
            });
        }
        else{
            CreateCode().then(res => {
                this.CaseMain.NumCode = res.toString();
            })
        }
    },
    data () {
        return {
            CaseMain: {
                Id: '00000000-0000-0000-0000-000000000000',
                Num: 1,
                NumCode: '',
                CaseProject: {
                    Name: ''
                },
                Status: 0 ,
                CreateTime: new Date()
            },
            ruleValidate: {
                Num: [{ type: 'number', message: '只能输入数字', trigger: 'blur' }],
            },
            Status:[
                {
                    value: 0,
                    label: "正常"
                },
                {
                    value: 1,
                    label: "预注销"
                },
                {
                    value: 3,
                    label: "注销中"
                },
                {
                    value: 4,
                    label: "已注销"
                }
            ],
            CaseMainTypes: [
                {
                    value: "0",
                    label: "母案件"
                },
                {
                    value: "1",
                    label: "子案件"
                },
                {
                    value: "3",
                    label: "分案件"
                },
                {
                    value: "4",
                    label: "案件"
                }
            ],
            callmodal: "casemain-sheet",
            PreserveStatuses:[
                {
                    value: "0",
                    label: "未保全",
                },
                {
                    value: "1",
                    label: "已保全",
                },
                {
                    value: "2",
                    label: "案前保全",
                }
            ],
            ProjectColumns: [
                {
                    type: 'index',
                    key: 'Index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    key: 'NumCode',
                    title: '项目编码',
                    minWidth: 120,
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',{style: { textAlign:"left" }},params.row.NumCode)
                    }
                },
                {
                    key: 'Company',
                    title: '分管分公司',
                    minWidth: 250,
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',{style: { textAlign:"left" }},params.row.Company)
                    }
                },
                {
                    key: 'Name',
                    title: '项目名称',
                    minWidth: 300,
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',{style: { textAlign:"left" }},params.row.Name)
                    }
                },
                {
                    key: 'BranchCompanyBoss',
                    title: '分公司负责人',
                    minWidth: 150,
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',{style: { textAlign:"left" }},params.row.BranchCompanyBoss)
                    }
                }
            ],
            ProjectData: [],
            ExcuteStatuses: [],
            CaseStatuses: [],
            ShowDialog: false, //选择项目对话框
            ProjectTotal: 0,
            ProjectPageIndex: 1,
            ProjectPageSize: 10,
            ProjectPageSizeOpts: [10,25,50,100],
            SelectedSingleProject: {
                Id: '00000000-0000-0000-0000-000000000000',
                Num: 0,
                NumCode: '',
                Company: '',
                Name: '',
                Province: '',
                City: '',
                Zone: '',
                AddressDetail: ''
            },
            keyword: ''
        }
    },
    watch: {
        'CaseMain.SocialCreditCode'(value){
            if(value != '' && value != null && value.length == 18){
                this.CaseMain.OrgnizationCode = value.toString().substring(7,value.length-2) + '-' + value.toString().slice(-2,-1);
            }
        }
    },
    methods: {
        Submit (name){
            //this.$Message.success('按了OK键');
             this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.CaseMain.Id == '00000000-0000-0000-0000-000000000000'){
                        this.$Message.success('校验通过!');
                        Create(this.CaseMain).then(res => {
                            if(res > 0){

                                setTimeout(() => {
                                    this.$store.dispatch('casemain/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                        this.$Notice.success({
                                        title: '操作提示',
                                        desc: '保存成功！ '
                                    });
                                }, 1000)
                                
                            }
                            else{
                                this.$Notice.error({
                                    title: '操作提示',
                                    desc: '保存失败！ '
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '保存失败：' + err.data + '!'
                            });
                        })
                        
                    }
                    else{
                        this.$Message.success('校验通过!');
                        
                        Update(this.CaseMain).then(res => {
                            if(res > 0){
                                setTimeout(() => {
                                    this.$store.dispatch('casemain/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                        this.$Notice.success({
                                        title: '操作提示',
                                        desc: '更新成功！'
                                    });
                                }, 1000)
                            }
                            else{
                                this.$Notice.success({
                                    title: '操作提示',
                                    desc: '更新失败！'
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '更新失败：' + err.data + '!'
                            });
                        })
                    }
                    this.ChangeModal();
                } else {
                    this.$Message.error('校验失败!');
                    //this.ChangeModal('CaseMain');
                }
            })
            
        },
        Reset (name){
            console.log(this.$refs[name]);
            this.$refs[name].resetFields();
        },
        ChangeModal (){
            //this.$refs[name].resetFields();
            this.$store.commit('casemain/CHANGE_MODAL');
            this.$router.push('/law/CaseMain')
        },
        ProjectChangePage(pageIndex){
            this.ProjectPageIndex = pageIndex;
            GetListByPage({
                PageIndex: this.ProjectPageIndex,
                PageSize: this.ProjectPageSize
            }).then(res => {
                this.ProjectTotal = res.totalCount;
                this.ProjectData = res.items
            })
        },
        ProjectChangePageSize(pageSize){
            this.ProjectPageSize = pageSize
                GetListByPage({
                PageIndex: this.ProjectPageIndex,
                PageSize: this.ProjectPageSize
            }).then(res => {
                this.ProjectTotal = res.totalCount;
                this.ProjectData = res.items
            })
        },
        SelectProjects(){
            /* this.User.CurrentPlayProject.Id = this.SelectedSingleProject.Id;
            this.User.CurrentPlayProject.NumCode = this.SelectedSingleProject.NumCode;
            this.User.CurrentPlayProject.Name = this.SelectedSingleProject.Name; */
            this.CaseMain.CaseProject.Id = this.SelectedSingleProject.Id;
            this.CaseMain.CaseProject.Num = this.SelectedSingleProject.Num;
            this.CaseMain.CaseProject.NumCode = this.SelectedSingleProject.NumCode;
            this.CaseMain.CaseProject.Company = this.SelectedSingleProject.Company;
            this.CaseMain.CaseProject.Name = this.SelectedSingleProject.Name;
            this.CaseMain.CaseProject.Province = this.SelectedSingleProject.Province;
            this.CaseMain.CaseProject.City = this.SelectedSingleProject.City;
            this.CaseMain.CaseProject.Zone = this.SelectedSingleProject.Zone;
            this.CaseMain.CaseProject.AddressDetail = this.SelectedSingleProject.AddressDetail;
        },
        SelectSingleRow(SelectedProject){
            this.SelectedSingleProject.Id = SelectedProject.Id;
            this.SelectedSingleProject.NumCode = SelectedProject.NumCode;
            this.SelectedSingleProject.Name = SelectedProject.Name;
            this.SelectedSingleProject.Company = SelectedProject.Company;
            this.SelectedSingleProject.Province = SelectedProject.Province;
            this.SelectedSingleProject.City = SelectedProject.City;
            this.SelectedSingleProject.Zone = SelectedProject.Zone;
            this.SelectedSingleProject.AddressDetail = SelectedProject.AddressDetail;
        },
        QueryProject(){
            GetListByPage({
                PageIndex: this.ProjectPageIndex,
                PageSize: this.ProjectPageSize,
                Keyword: this.keyword
            }).then(res => {
                this.ProjectTotal = res.totalCount;
                this.ProjectData = res.items
            })
        }
    }
}
</script>
